<template>
	<view>
		<uni-nav-bar title="选择联系人" :statusBar="true" left-icon="back" :fixed="true" @clickLeft="$tab.back()"
			:border="false">
		</uni-nav-bar>
		<u-line color="#F8F8F8"></u-line>
		<view class="bg-FFF px-20 pt-12 pb-32">
			<u-search placeholder="搜索" v-model="keyword" :clearabled="true" shape="square" :showAction="false"
				@change="keywordChange"></u-search>
		</view>

		<u-index-list :index-list="indexList" v-if="indexList.length > 0">
			<template v-for="(item, index) in itemArr">
				<!-- #ifdef APP-NVUE -->
				<u-index-anchor :text="indexList[index]"></u-index-anchor>
				<!-- #endif -->
				<u-index-item>
					<!-- #ifndef APP-NVUE -->
					<u-index-anchor :text="indexList[index]"></u-index-anchor>
					<!-- #endif -->
					<view class="list-cell flex items-center" v-for="(cell, index) in item" :key="cell.userId">
						<checkbox-group @change="selectUser(cell)">
							<checkbox :checked="cell.checked" />
						</checkbox-group>
						<image :src="cell.avatar" class="image-80 round ml-20" mode=""></image>
						<view class="text-32 ml-20 font-500">
							{{cell.nickName}}
						</view>
					</view>
				</u-index-item>
			</template>
		</u-index-list>

		<view class="" style="height: 200rpx;">

		</view>

		<view class="iphoneX bottom bg-FFF w-full">
			<view class="py-16 px-12 flex justify-between items-center">
				<view class="userBox relative" v-if="groupId == null && forwardId == null">
					<image :src="userInfoAvatar" mode="" class="image-80 round border-2-gray"></image>
					<image :src="item.avatar" mode="" class="image-80 round absolute border-2-gray"
						v-for="(item,index) in selectUserList" :key="item.userId" :style="{
						top:0,
						left: 30 * (index+1) + 'rpx',
						zIndex:index
					}" v-if="index < 8"></image>
					<view class="lastBox border-2-gray absolute round text-24 text-center text-FFF" :style="{
						left: (selectUserList.length + 1) * 30 + 'rpx'
					}" v-if="selectUserList.length > 0">
						{{ selectUserList.length + 1}}人
					</view>
				</view>
				<view class="" v-else>

				</view>
				<view class="confirm text-FFF text-32" @click="confirm" style="background: #FF323B;">
					确认
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				keyword: '',
				indexList: [],
				itemArr: [],
				userInfoAvatar: this.$store.getters.userInfo.avatar,
				selectUserList: [],
				groupId: null, //会话组id 给群加新人
	
				forwardId: null, //转发id 如果是转发则有
			};
		},
		onLoad(e) {
			if (e && e.id) {
				this.groupId = e.id
			}

			if (e && e.forwardId) {
				this.forwardId = e.forwardId
			}
		},
		onShow() {
			this.getData()
		},
		methods: {
			selectUser(item) {
				item.checked = !item.checked
				if (item.checked) {
					this.selectUserList.push({
						userId: item.userId,
						avatar: item.avatar
					})
				} else {
					let findIndex = this.selectUserList.findIndex(select => {
						return select.userId == item.userId
					})
					if (findIndex != -1) {
						this.selectUserList.splice(findIndex, 1)
					}
				}
			},
			async getData() {
				const res = await this.$Api.chat.addressBookList({
					userName: this.keyword,
					groupId: this.groupId || ''
				})
				this.indexList = []
				this.itemArr = []
				res.data.forEach(item => {
					this.indexList.push(item.firstLetter)
					item.userList.forEach(user => {
						user.checked = false
						this.selectUserList.forEach(selectUser => {
							if (user.userId == selectUser.userId) {
								user.checked = true
							}
						})
					})
					this.itemArr.push(item.userList)
				})
			},
			keywordChange(e) {
				this.getData()
			},
			async confirm() {
				if (this.selectUserList.length == 0) {
					this.$modal.msg('请先选择联系人!')
					return
				}
				if (this.groupId == null && this.forwardId == null) {
					// if (this.selectUserList.length < 2) {
					// 	this.$modal.msg('最少三人可建群!')
					// 	return
					// }
					let list = this.selectUserList.map(item => {
						return item.userId
					})
					uni.setStorageSync('groupChatUser', JSON.stringify(list))
					this.$tab.nav(`/pages/chat2/confirmGroupChat`)
				} else if (this.groupId != null) {
					let list = this.selectUserList.map(item => {
						return item.userId
					})

					const res = await this.$Api.chat.groupAddNewUser({
						groupId: this.groupId,
						newUserIds: list.join(',')
					})

					this.$modal.msg('添加成功!')
					this.$tab.back(1500)
				}else if(this.forwardId != null){
					let list = this.selectUserList.map(item => {
						return item.userId
					})
					
					const res = await this.$Api.chat.msgForward({
						id: this.forwardId,
						userIds: list.join(',')
					})
					
					this.$modal.msg('转发成功!')
					this.$tab.back(1500)
				}
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #FFF;
	}

	.bottom {
		position: fixed;
		left: 0;
		bottom: 0;
		z-index: 99;

		.confirm {
			width: 276rpx;
			height: 88rpx;
			background: #000000;
			line-height: 88rpx;
			text-align: center;
		}
	}

	/deep/ .u-index-anchor {
		background-color: #FFF !important;
		border: none !important;
	}

	/deep/ .uni-checkbox-input-checked {
		background-color: #000000 !important;
	}

	.userBox {
		width: 360rpx;
		height: 80rpx;

	}

	.lastBox {
		width: 80rpx;
		height: 80rpx;
		background: rgba(0, 0, 0, .5);
		top: 0;
		z-index: 999;
		line-height: 80rpx;
	}
</style>